<template>
  <div class="page">
    <header class="header">
      <div class="header-img-box">
        <img class="header-img" src="../../assets/logo.png" alt="logo" @click="goto_home">
      </div>
      <div class="edit" @click="goto_update">
        <img width="20" height="20" src="../../assets/Edit.png">
      </div>
    </header>
    <div class="mainBody vh-center">
      <ArticleContent v-bind="article_data"/>
    </div>
  </div>
</template>

<script>
import ArticleContent from '../../components/article_content';
import ArtcileApi from './model/api.js';
require('../../../static/libs/vscode.css');
export default {
  name: 'ArticlePage',
  components: {
    ArticleContent,
  },
  data () {
    return {
      article_data: {},
    };
  },
  created () {
    this.get_article();
  },
  methods: {
    goto_home: function () {
      this.$router.push(`/dev`);
    },
    goto_update: function () {
      this.$router.push(`/update/${this.article_data.id}`);
    },
    get_article: async function () {
      const self = this;
      const id = this.$route.params.id;
      this.article_data = await ArtcileApi.getArticleById(id);
      this.$nextTick(function () {
        self.render_content();
      });
    },
    render_content: function () {
      const codeBlockList = document.querySelectorAll('p code');
      if (codeBlockList) {
        codeBlockList.forEach((block) => {
          window.hljs.highlightBlock(block);
        });
      }
    },
  },
};
</script>
<style>
   .header {
        height:60px;
        background:#222;
        margin-bottom:40px;
        display: flex;
        justify-content: space-between;
        align-items: center;

   }
   .header-img-box {
        height: 100%;
        margin-left: 20px;
   }
   .header-img {
        height:90%;
        width: 550px;
    }
    .edit {
      height: 20px;
      margin-right: 100px;

    }
</style>
